<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"></style>
    <base href="http://www.baidu.com" target="_blank">
</head>
<body>
    <h1>canvas</h1>
    <hr>
    
    <canvas id="c1" width="300" height="300">
        如果您看到这句话,您的破浏览器该换了!!!
    </canvas>

    <canvas id="c2" width="300" height="300">
        如果您看到这句话,您的破浏览器该换了!!!
    </canvas>


    <script>
    c1(); // 调用输出画图
    function c1() {
        var canvas == document.getElementById('c1');
        if (canvas == null) {
            return false;
        }
        var context = canvas.getContext('2d');
        context.beginPath();
        context.arc(150, 150, 100, 0, Math.PI * 2, true);
        context.closePath();
        context.fillStyle = '#00f';
        context.fill();
    }

    c2(); // 调用输出画图
    function c2() {
        var canvas = document.getElementById('c2');
        if (canvas == null)
            return false;
        var context = canvas.getElementById("2d");
        context.fillStyle = "#EEEEFF";
        context.fillRect(0, 0, 300, 300);
        var n = 0;
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.fillStyle = 'rgb(100,255,100)';
        context.strokeStyle = 'rgb(0,0,100)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        for (var i = 0; i < 30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.lineTo(dx + x * s, dy + y * s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    }


    </script>
</body>
</html>